<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/common.css" />
		<style type="text/css">
			.bind {
				overflow: hidden;
				height: 30px;
				line-height: 30px;
				background: #fff;
				border-top: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
				color: #999;
				margin: 20px 0 10px;
			}
			
			.bind>div {
				float: left;
				width: 50%;
				text-align: center;
				position: relative;
			}
			
			.find-div-body {
				position: absolute;
				right: -10px;
				height: 30px;
				top: 0px;
				z-index: 1;
			}
			
			.find-div-body:before {
				box-sizing: content-box;
				width: 0px;
				height: 0px;
				position: absolute;
				top: -1px;
				right: 0;
				padding: 0;
				border-top: 15px solid transparent;
				border-left: 12px solid #ccc;
				border-bottom: 15px solid transparent;
				display: block;
				content: '';
				z-index: 0;
			}
			
			.find-div-body:after {
				box-sizing: content-box;
				width: 0px;
				height: 0px;
				position: absolute;
				top: 0;
				right: 2px;
				padding: 0;
				border-top: 14px solid transparent;
				border-left: 11px solid #fff;
				border-bottom: 14px solid transparent;
				display: block;
				content: '';
				z-index: 10
			}
			
			.check {
				color: #e14854;
				background: #eee;
			}
			
			.check .find-div-body:after {
				border-left-color: #eee;
			}
			
			.phone {
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				height: 40px;
				line-height: 40px;
				background: #fff;
				border-bottom: 1px solid #eee;
			}
			
			.phone input {
				height: 38px;
				padding: 0 14px;
				margin: 0;
			}
			
			.mui-content input {
				border: none;
			}
			
			.phone button {
				width: 80px;
				padding: 0;
				font-size: 12px;
				min-width: 80px;
				height: 20px;
				line-height: 20px;
				margin: 10px 14px 10px 0;
				border-radius: 0;
				color: #909090;
				border-color: #ccc;
			}
			
			.button,
			.prompt {
				padding: 0 10px;
			}
			
			.button button {
				width: 100%;
				height: 40px;
				background: #bd212e;
				border-color: #bd212e;
				margin-top: 10px;
			}
			
			.prompt {
				color: #999;
				font-size: 12px;
				margin-top: 20px;
			}
			
			.prompt>div:first-child {
				padding-left: 20px;
				background: url('../../images/AKyk.png')no-repeat 0 1px;
				background-size: 16px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
			<h1 class="mui-title">个人信息</h1>
		</header>
		<div class="mui-content">
			<div class="bind">
				<div class="check">
					1.验证原号码
					<div class="find-div-body">
					</div>
				</div>
				<div>2.绑定新手机</div>
			</div>
			<div class="phone">
				<input type="tel" placeholder="请填写手机号" />
				<button type="button" class="mui-btn mui-btn-outlined getCode">发生验证码</button>
			</div>
			<div>
				<input type="tel" placeholder="请输入验证码" />
			</div>
			<div class="button"><button type="button" class="mui-btn mui-btn-danger phone_tap">下一步</button></div>
			<div class="prompt">
				<div>温馨提示</div>
				<div>手机号码修改成功后需要使用新的手机号码进行登录。</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript">
			mui.init({swipeBack:true})
			var num = 3
			var temp = num
			var swithCode = false
			//获取验证码
			$(".getCode").on("tap", function() {
				if(swithCode) {
					return
				}
				if(!common.phone.test($('.phone input').val())) {
					common.toast('请输入正确的手机号码')
					return
				}
				swithCode = true
				common.ajax('/userCore/sendSMSCode', {
					mobile: $('.phone input').val()
				}, function(data) {
					if(data.code == 1) {
						jishi()
					} else {
						swithCode = true
						if(data.resultMsg) {
							common.toast(data.resultMsg)
						} else {
							console.log(data)
						}
					}
				})
			})
			
			
			function jishi() {
				if(temp >= 0) {
					$('.getCode').text(temp + "s")
					setTimeout(jishi, 1000)
				} else {
					temp = num
					swithCode = false
					$('.getCode').text('重新获取')
				}
				temp--
			}
		</script>
	</body>

</html>